﻿<!-- #layout name=empty-->
<div id="basic-info" v-cloak>
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="form-horizontal margin-bottom-15" v-if="isNew">
        <div class="form-group save-type">
          <label class="control-label col-sm-3" for="ck-is-public"
            >Share datasource</label
          >
          <div class="col-sm-9">
            <div class="checkbox">
              <label>
                <input id="ck-is-public" type="checkbox" v-model="isPublic" />
              </label>
            </div>
          </div>
        </div>
        <kb-form
          simple
          ref="methodForm"
          :model="model"
          :rules="rules"
          v-if="isPublic"
        >
          <kb-form-item
            prop="methodName"
            v-slot="error"
            id="method-name-error-container"
          >
            <div class="form-group" :class="{'has-error' : !!error.error }">
              <label class="control-label col-sm-3" for="txt-method-name"
                >Setting name</label
              >
              <div class="col-sm-9">
                <input
                  type="text"
                  id="txt-method-name"
                  name="MethodName"
                  class="form-control input-medium"
                  placeholder="Name"
                  v-model="model.methodName"
                  v-kb-tooltip:right.manual.error="error.error"
                  data-container="#method-name-error-container"
                />
              </div>
            </div>
          </kb-form-item>
        </kb-form>
      </div>

      <div v-show="isFolder || isProductType">
        <div class="wizard" data-toggle="wizard">
          <div class="wrapper">
            <a
              class="wizard-nav-item active"
              href="javascript:;"
              data-step="choose-folder"
              >Choose folder<b></b
            ></a>
            <a class="wizard-nav-item" href="javascript:;" data-step="configure"
              >Configure<b></b
            ></a>
          </div>
        </div>
        <div
          class="wizard-body"
          data-step="choose-folder"
          style="display: block;"
        >
          <p v-if="folderListLoading">{{ Kooboo.text.common.loading }}</p>
          <template v-else>
            <div
              id="using_json"
              class="margin-bottom-15"
              v-if="hasFolder || hasProductType"
            ></div>
            <div v-else>
              <div class="alert alert-info">
                <p>Create your first folder and Refresh this dialog.</p>
                <p>
                  <a :href="textContentsUrl" target="_blank" class="btn green"
                    >Create folder</a
                  >
                  <a
                    href="javascript:location.reload()"
                    target="_self"
                    class="btn btn-line"
                    >Refresh</a
                  >
                </p>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div
        class="wizard-body"
        data-step="configure"
        v-show="!isFolder && !isProductType"
      >
        <div class="form-horizontal">
          <component
            v-for="(item, index) in parameterBinding"
            :is="getControlName(item.value.controlType)"
            :key="index"
            :name="item.value.displayName"
            :value="item.value.binding"
            :fields="fieldsOfCurrentFolder"
            @change="changeParameterBinding"
          ></component>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/lib/jstree.min.js",
      "/_Admin/Scripts/components/kbForm.js",
      "/_Admin/Scripts/components/extensionEditor/controls.js"
    ]);
    Kooboo.loadCSS(["/_Admin/Styles/jstree/style.min.css"]);
  })();
</script>
<script src="/_Admin/View/Development/DataMethodSettingDialog.js"></script>
